<template>
  <div>
      <el-form :inline="true" :model="formData">
          <el-form-item label="用户id">
          <el-input placeholder="请输入用户ID" v-model="formData.userId" clearable @clear="queryList"/>
          </el-form-item>
          <el-form-item label="用户积分">
          <el-input placeholder="请输入用户积分" v-model="formData.integrals" clearable @clear="queryList"/>
          </el-form-item>
          <el-form-item >
              <el-button type="primary" @click="queryList">搜索</el-button>
          </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange" ref="multipleTableRef">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="userId" label="用户ID" width="150" />
      <el-table-column prop="integrals" label="积分" width="150"/>
      <el-table-column prop="address" label="操作" >
        <template #default="scope">
          <el-button size="mini" type="primary" :title="title" @click="edit1(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
          <div class="demonstration"></div>
          <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
      </div>

      <el-dialog v-model="dialogFormVisible" :title="title" width="500" @close="cancel" >
        <el-form :model="form">
          <el-form-item label="用户ID" :label-width="formLabelWidth">
            <el-input v-model="userData.userId" placeholder="请输入用户ID" :disabled="!isAddMode.value"/>
          </el-form-item>
          <el-form-item label="积分" :label-width="formLabelWidth">
            <el-input v-model="userData.integrals" placeholder="请输入积分"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

const currentInstance = getCurrentInstance()
const {$http}=currentInstance.appContext.config.globalProperties;
const tableData= ref([])
const dialogFormVisible = ref(false)
let title = ref()

//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
formData.value.ids = val.map(item => item.id);
}

const isAddMode = ref(false);

const formData = ref({
roleCode:'',
roleName:'',
pageNum:1,
pageSize:5,
ids:[]
})

const userData= ref({
id:'',
userId:'', 
integrals:''
})



onMounted(()=>{
queryList();
});

function handleSizeChange(val) {
    formData.value.pageSize=val
    queryList();
}
function handleCurrentChange(val) {
    formData.value.pageNum=val
    queryList();
}



// 查
function queryList(){
$http({
  method:'get',
  url:'http://localhost:8081/sfzy/integral/page',
  params:formData.value
}).then(res=>{
  tableData.value = res.data.data.list;
})
}


// 新增
function add1(){
title.value = '新增积分用户'
dialogFormVisible.value=true
isAddMode.value = true; 
}

function add(){
      $http({
          method:'post',
          url:'http://localhost:8081/sfzy/integral',
          data:userData.value
      }).then(res=>{
          if(res.data.code== 200){
            ElMessage.success('添加成功')
            // const userId = res.data.data;  
            // integral(userId)
            // sysUserRole(userId)
          }else{
              ElMessage.success('添加失败')
          }
          //关闭添加 对话框
          dialogFormVisible.value= false;
          // 在做一次查询
          queryList();
          cancle();
        })
}

// 修改
function edit1(rowData){
title.value = '修改积分'
dialogFormVisible.value=true
userData.value=rowData
isAddMode.value = false; // 设置为修改状态，输入框不可编辑
}

function edit(){
      $http({
          method:'put',
          url:'http://localhost:8081/sfzy/integral',
          data:userData.value
      }).then(res=>{
          if(res.data.code== 200){
              ElMessage.success('修改成功')
          }else{
              ElMessage.success('修改失败')
          }
          //关闭添加 对话框
          dialogFormVisible.value= false;
          isAddMode.value = false;
          // 在做一次查询
          queryList();
          cancle();
        })
}

function confirm(){
  console.log(title);
  
if(title.value=='新增积分用户'){
  add();
}else{
  edit();
}
}

//关闭
function cancle(){
dialogFormVisible.value = false;
if (!isAddMode.value) {
        isAddMode.value = false;
        userData.value = {
            id: '',
            userId: '',
            integrals: ''
        };
    }
      queryList();
}
</script>

<style scoped>

</style>
